import React, {Component} from 'react'
import {Button, message, Modal, Table, Tag} from 'antd';
import Device from '../../types/Device';
import {getRes} from '../../configFile';
import {listDevice, queryDeviceAmount} from '../../requests/Device';

interface IProps {
    propDevices: Set<Device>
    setSelectedDevices: (set: Set<Device>) => void
    modalVisible: boolean
    setModal: () => void
}
interface IState {
    visible: boolean     //模态框是否可见
    addedDevice: Set<Device>
    deviceSource: (Device & { key: number })[]
    amount: number
    offset: number
    limit: number
}
export default class AddDeviceForComparation extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props)
        this.state = {
            deviceSource: [],
            visible: false,
            addedDevice: new Set(this.props.propDevices),
            amount: 0,
            offset: 0,
            limit: 5,
        }
    }
    //获取设备数据
    getDevice = async () => {
        try {
            const amountRes = getRes(await queryDeviceAmount())
            if (amountRes.isSuccessful === false) {
                message.error(amountRes.message)
                return;
            }
            const res = getRes(await listDevice(this.state.offset, this.state.limit))
            if (res.isSuccessful === false) {
                message.error(res.message)
                return;
            }
            this.setState({
                deviceSource: res.data.map((item: Device) => Object.assign({}, item, { key: item.deviceID })),
                amount: amountRes.data
            })
        }
        catch (error) {
            message.error(error.toString())
        }
    }
    async componentDidMount() {
        await this.getDevice()
    }
    //state添加设备
    addSelectedDevice = (newDevice: Device & { key: number }) => {
        if (this.state.addedDevice.size === 3) {
            message.warn("最多添加3个设备");
            return;
        }
        this.state.addedDevice.add(newDevice)
        this.setState({ ...this.state })
        console.log("模态框已添加", this.state.addedDevice);
    }
    //模态框提交
    handleOk = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
        this.props.setSelectedDevices(this.state.addedDevice)
        this.props.setModal();
    };
    //模态框取消
    handleCancel: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void = () => {
        this.props.setModal();
    }
    //删除选中
    deleteAdded(item: Device) {
        this.state.addedDevice.delete(item)
    }
    //表格展示的列
    columns = [{
        title: '设备名称',
        dataIndex: 'deviceName',
        key: 'deviceName',
    },
    {
        title: '设备ID',
        dataIndex: 'deviceID',
        key: 'deviceID',
    },
    {
        title: '所属厂商ID',
        dataIndex: 'manufacturerID',
        key: 'manufacturerID',
    },
    {
        title: '操作',
        key: 'action',
        render: (record: Device & { key: number }) => (
            <Button size='middle' onClick={this.addSelectedDevice.bind(this, record)}>添加</Button>
        )
    }]
    render() {
        return (
            <Modal
                width="800px"
                title="添加设备"
                visible={this.props.modalVisible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
            >
                <div className="addedDevicesForComparation" style={this.state.addedDevice.size === 0 ? { display: 'none' } : {}}>
                    已添加设备:{
                        Array.from(this.state.addedDevice).map(item => {
                            return (
                                <Tag style={{ margin: 8 }} closable key={item.deviceID} onClose={() => this.deleteAdded(item)}>
                                    {item.deviceName}
                                </Tag>)
                        })
                    }
                </div>
                <Table columns={this.columns}
                    dataSource={this.state.deviceSource}
                    pagination={{
                        onChange: (page, pageSize) => {
                            if (!!pageSize) {
                                this.setState({
                                    offset: (page - 1) * (pageSize),
                                    limit: (pageSize)
                                },()=>{
                                    this.getDevice()
                                })
                            }
                        },
                        defaultPageSize: this.state.limit,
                        total: this.state.amount,
                        showSizeChanger: false
                    }} />
            </Modal>
        )
    }
}